<template>
  <div>
      <el-breadcrumb separator="/" style="height:10px;">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>换房管理</el-breadcrumb-item>
      </el-breadcrumb>
    <el-table
      :data="pageinfo.list"
      border
      style="width: 100%">
      <el-table-column
        prop="user.uname"
        label="客户"
        width="100">
      </el-table-column>

      <el-table-column
        prop="user.iphone"
        label="联系电话"
        width="150">
      </el-table-column>

      <el-table-column
        prop="user.certificateType.tname"
        label="证件类型"
        width="150">
      </el-table-column>

      <!-- <el-table-column label="性别" width="180">
        <template slot-scope="scope">
          {{scope.row.gender == 0 ? '男':'女'}}
        </template>
      </el-table-column> -->
      <el-table-column
        prop="user.idnumber"
        label="证件号"
        width="180">
      </el-table-column>

      <el-table-column
        prop="roomnumber"
        label="房间号"
        width="80">
      </el-table-column>

      <el-table-column
        prop="starttime"
        label="入住时间"
        width="150">
      </el-table-column>

      <el-table-column
        prop="endtime"
        label="离店时间"
        width="180">
      </el-table-column>

      <el-table-column
        prop="checkinnumber"
        label="入住人数"
        width="100">
      </el-table-column>

      <el-table-column label="状态" width="120">
        <template slot-scope="scope">
          {{scope.row.state == 2 ? '已入住':'未入住'}}
        </template>
      </el-table-column>

      <el-table-column label="管理操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="info"
            @click="changeroom(scope.row)">更换房间</el-button>
        </template>
        </el-table-column>
    </el-table>


    <el-dialog
      title="更换房间"
      :visible.sync="dialogVisible"
      width="30%">
      <div>
        <div>用户 : {{guest.user.uname}}</div>
        <div>房间 : {{guest.roomname}}</div>
        <div>价格 : ￥{{guest.shoumoney}}</div>
        <div>时间 : {{guest.starttime}} -> {{guest.endtime}}</div>
        <el-divider></el-divider>
        <el-table
        :data="guestkxList"
        style="width: 100%">
        <el-table-column
          prop="roomname"
          label="房间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="roommoney"
          label="价格"
          width="180">
        </el-table-column>
        
        <el-table-column label="管理操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="info"
              @click="changguestFn(scope.row)">更换</el-button>
          </template>
        </el-table-column>


      </el-table>

      </div>

      <el-dialog
        width="30%"
        title="确认订单"
        :visible.sync="innerVisible"
        append-to-body>
        <div>用户 : {{guest.user.uname}}</div>
        <div>更换房间 : {{guest.roomname}} -> {{room.roomname}}</div>
        <div>{{moneyxinxi}}</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="RoomChangeFn">确 定</el-button>
        </span>
      </el-dialog>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="guestVo.pageNum"
        :page-sizes="[3, 5, 7, 10]"
        :page-size="guestVo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageinfo.total">
      </el-pagination>
  </div>
</template>

<script>
import {findAllGuestWTGSH,findAllGuestKX,canceltheorder,changeGuest} from '../../api'
export default {
  data() {
    return {
      pageinfo : {}  ,
      guestVo : {
        pageNum : 1,
        pageSize : 5
      },
      guestkxList : [],
      guest : {
        user : {}
      },
      room : {},
      dialogVisible : false,
      innerVisible : false,
      moneyxinxi : '',
      day : 0
    }
  },
  created() {
    this.findAll()
  },
  methods: {
    handleSizeChange(val) {
      this.guestVo.pageNum = 1
      this.guestVo.pageSize = val
      this.findAll();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.guestVo.pageNum = val
      this.findAll();
      // console.log(`当前页: ${val}`);
    },
    async findAll(){
      let {data:baseRefault} = await findAllGuestWTGSH(this.guestVo)
      this.pageinfo = baseRefault.data
    },
    async changeroom(guest){
      let {data:baseRefault} = await findAllGuestKX()
        this.guestkxList = baseRefault.data
        this.guest = guest
        this.dialogVisible = true
      
    },
    changguestFn(room){
      //现在居住的
      // console.info(this.guest)
      //要更换的
      // console.info(room)
      this.room = room
      //住房天数
      var day = this.guest.shoumoney / this.guest.roommoney
      this.day = day
      console.info(day)
      var money = this.guest.shoumoney - (room.roommoney*day)
      console.info(money)
      if(money > 0){
        this.moneyxinxi = '退还您'+money+'元'
      }else if(money == 0){
        this.moneyxinxi = '等价交换'
      }else{
        this.moneyxinxi = '需要支付'+(-money)+'元'
      }
      this.innerVisible = true
    },
    async RoomChangeFn(){
      // this.guest 现
      //将现在的房间 更新为空闲房间
      let {data:baseRefault} = await canceltheorder(this.guest.rid)
      
      // this.room 换
      this.room.uid = this.guest.uid
      this.room.shoumoney = this.room.roommoney * this.day
      this.room.starttime = this.guest.starttime
      this.room.endtime = this.guest.endtime
      this.room.checkinnumber = this.guest.checkinnumber
      let {data:baseRefault1} = await changeGuest(this.room)
      this.$message.success(baseRefault1.message)
      this.dialogVisible = false
      this.innerVisible = false
      this.findAll()
    }
  },
}
</script>

<style>

</style>